<!DOCTYPE html>
<html>

{include file='public/header'}
<style>
    .layui-table th {
        text-align: center;
    }

    .layui-table td {
        text-align: center;
    }

    .layui-input-block {
        margin-left: 75px;
    }
    .chooseVideo .layui-form-label{
        width: 62px;
        padding: 9px 5px;
    }
    .layui-layer-page .layui-layer-content{
        overflow: visible;
    }
    td .layui-table-cell {
        height: auto;
        line-height: 30px;
        /* height: 120px; */
        text-align: left;
    }
    .layui-table img {
        max-width: 100%;
    }
    .layer-photos{
        cursor:pointer;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>

<body>
    <div class="x-nav">
        <span class="layui-breadcrumb">
            <a href="">首页</a>
            <a href="">短剧管理</a>
            <a><cite>短剧列表</cite></a>
        </span>
        <a class="layui-btn layui-btn-small" id="reload" title="刷新">
            <i class="layui-icon" style="line-height:30px"><i class="iconfont">&#xe6aa;</i></i>
        </a>
    </div>
    <div class="x-body">
        <div class="layui-row">
            <form class="layui-form">
                <div class="layui-inline">
                    <label class="layui-form-label w-auto">短剧id：</label>
                    <div class="layui-input-inline">
                        <input type="text" name="id" placeholder="请输入短剧id" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label w-auto">短剧名称：</label>
                    <div class="layui-input-inline">
                        <input type="text" name="name" placeholder="请输入短剧名称" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label w-auto">分类：</label>
                    <div id="pMenu"></div>
                </div>
                <button class="layui-btn" style="margin-left: 10px;" lay-submit lay-filter="searchList">搜索</button>
                <button type="reset" id="resetList" class="layui-btn layui-btn-primary">重置</button>
            </form>
        </div>

        <table id="video" lay-filter="video"></table>
    </div>
    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="add">新增短剧</button>
            <button class="layui-btn layui-btn-sm" lay-event="clear">清理短剧缓存</button>
            <!-- <button class="layui-btn layui-btn-sm layui-btn-warm" lay-event="push_notification">消息推送</button> -->
        </div>
    </script>
    <script type="text/html" id="tbBar">
        <div style="text-align: center;">
            {{#  if(d.drama_id !== 0 ){ }}
                <a class="layui-btn layui-btn-xs" lay-event="flow">微信切流</a>
            {{#  } }}
            {{#  if(d.is_shelves === 0 ){ }}
                <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="change">上架</a>
            {{#  } else { }}
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="change">下架</a>
            {{#  } }}
            {{#  if(d.is_recommended === 0 ){ }}
                <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="recommended">设为推荐</a>
            {{#  } else { }}
                <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="recommended">取消推荐</a>
            {{#  } }}
            <br>
            <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="look">查看</a>
            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        </div>
    </script>
    <script>
        let params = {
            elem: '#video'
            , toolbar: '#toolbarDemo'
            , url: '{:url("admin/video/list")}' //数据接口
            , page: true //开启分页
            , id: 'video'
            , limit:15
            , cols: [[//表头
                { type: 'checkbox' },
                { field: 'id', title: 'ID',width:145, sort: true, align: 'center',templet:function(d){
                        if(d.is_copy == 1){
                            return `<div style='text-align:center'>${d.id} <span class="layui-badge">复</span> <span class="layui-badge" style='background-color:#eee;color:#ccc'>原：${d.original_id}</span></div>`
                        }else{
                            return `<div style='text-align:center'>${d.id}</div>`
                        }

                    } 
                }
                , {
                    field: 'cover_img', title: '封面图片', align: 'center', width: 110, templet: function (d) {
                        if (d.cover_img) {
                            return `<div class="layer-photos"  style="cursor:pointer;height: 100%;">
                                    <img onclick="showimg(this)" style="height: 100%;" src=`+ d.cover_img + ` alt="">
                                </div>`;
                        } else {
                            return `<div>暂无照片</div>`
                        }
                    }
                }
                , { title: '短剧信息', templet: function (d){
                    return `
                        <div>名称：${d.name}${d.drama_id !== 0 ? ` <span class="layui-badge layui-bg-green">微信剧目ID：${d.drama_id}</span>` : ''}</div>
                        <div>所属分类：${d.video_type_name}</div>
                        <div>标签名：${d.label}</div>
                        <div>标签类型：${d.type_txt}</div>
                    `
                } }
                , { title: '短剧状态', templet: function (d){
                    return `
                        <div>完结状态：${d.status === 0 ? '未完结' : '已完结'}</div>
                        <div>付费状态：${d.is_free === 0 ? '免费' : '付费'}</div>
                        <div>上架状态：${d.is_shelves === 0 ? '已下架' : '已上架'}</div>
                        <div>充值限制模板：${d.recharge_limit_template_name ?? ''}</div>
                    `
                } }
                , {
                    field: 'created_at', title: '创建时间' , width:180, templet: function (d) {
                        return dayjsFormat(d.created_at)
                    }
                }
                //, { field: 'sort', title: '排序', width: 80 }
                , { align: 'center', toolbar: '#tbBar', title: '操作',width:220 }
            ]]

        }
        tableList(params)

        layui.use('table', function () {
            var table = layui.table;
            table.on('toolbar(video)', function (obj) {
                var event = obj.event;
                if (event === 'add') {
                    x_admin_show('添加短剧', './info.html', 1150, 650);
                } else if (event === 'clear') {
                    msgAjax('/admin/video/clear')
                } else if (event === 'push_notification'){
                    
                    layui.use(["form", "layer"], function () {
                        $ = layui.jquery;
                        var form = layui.form,
                            layer = layui.layer;
                        layer.open({
                            type: 1,
                            title: '选择短剧推送消息',
                            btn: ['确定', '取消'],
                            maxHeight: '500',
                            content: `
                                <div class="x-body chooseVideo" >
                                    <form class="layui-form" lay-filter="editTemplate">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">
                                                <span class="x-red">*</span>选择短剧
                                            </label>
                                            <div id="pVideo"></div>
                                        </div>
                                        <button id="submitTemplate" class="layui-btn" lay-submit lay-filter="submitTemplate" style="display: none;" />
                                        
                                    </form>
                                </div>
                            `,
                            success:function(){
                                let selectParams = {
                                    url: '/admin/video/select',
                                    selected: [],
                                    tips: '选择短剧',
                                    name: 'video_id',
                                    field_id: 'id',
                                    field_Name: 'name',
                                    elem: '#pVideo'
                                }
                                selectN(selectParams)
                            },
                            yes: function(layMask){
                                let data = form.val("editTemplate")
                                
                                layer.close(layMask)
                            }
                        });
                        form.val("editTemplate", params);
                        
                    });
                    
                }
            });
            table.on('tool(video)', function (obj) {
                var event = obj.event;
                if (event === 'del') {
                    DeleteAjax('/admin/video/delete', { id: obj.data.id }, 'video')
                } else if (event === 'edit') {
                    x_admin_show('编辑短剧', `./info.html?id=${obj.data.id}`, 1150, 650);
                } else if (event === 'flow') {
                    reloadAjax('/admin/openWeixin/postMiniDramaUrl', { video_id: obj.data.id });
                } else if (event === 'change') {
                    ChangeAjax('/admin/video/shelve', { id: obj.data.id }, 'video')
                } else if (event === 'look') {
                    x_admin_show(`查看目录（短剧id:${obj.data.id} 短剧名称:${obj.data.name}）`, `../video_detail/index.html?id=${obj.data.id}&video_name=${obj.data.name}`, 1150, 650,null);
                } else if (event === 'recommended') {
                    ChangeAjax('/admin/video/recommend', { id: obj.data.id }, 'video')
                }
            });

        });

        let selectParams = {
            url: '/admin/type/select',
            elem: '#pMenu',
            selected: [],
            tips: '选择分类',
            name: 'video_type_id',
            field_id: 'id',
            field_Name: 'name',
        }
        selectN(selectParams)
    </script>

</body>

</html>